<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图效果</title>
<link rel="stylesheet" href="css/banner.css">
<script src="js/jquery-3.4.1.min.js"></script>

</head>
<body>
	
<div id="slider" class="slider">
	<div id="slider_scroll" class="slider_scroll"">

		<div id="slider_main" class="slider_main"><!-- 包含着div》a》img -->
				<div class="item">
					<a href="#"><img src="images/banner (1).jpg"></a>
				</div>

				<div class="item">
					<a href="#"><img src="images/banner (2).jpg"></a>
				</div>

				<div class="item">
					<a href="#"><img src="images/banner (3).jpg"></a>
				</div>

				<div class="item">
					<a href="#"><img src="images/banner (4).jpg"></a>
				</div>

		</div>

		<span class="next" id="next"></span>
		<span class="prev" id="prev"></span>
		
	</div>

	<div class="slider_index" id="slider_index">
		<!--一个索引集  通过js来动态生成 同时是一个透明的遮罩面板-->
	</div>
</div>




<script type="text/javascript">









</script>

</body>
</html>